<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useSvgIcon } from '@/hooks/common/icon';
import { useFullscreen } from '@vueuse/core';
import { ArrowLeft } from '@element-plus/icons-vue';
import { $t } from '@/locales';
import DarkModeContainer from '@/components/common/dark-mode-container.vue';
import GlobalLogo from '../../modules/global-logo/index.vue';
import FullScreen from '@/components/common/full-screen.vue';
import ThemeSchemaSwitch from '@/components/common/theme-schema-switch.vue';
import SvgIcon from '@/components/custom/svg-icon.vue';

defineOptions({ name: 'ClientHeader' });

const appStore = useAppStore();
const themeStore = useThemeStore();
const authStore = useAuthStore();
const { toLogin } = useRouterPush();
const { isFullscreen, toggle } = useFullscreen();
const { SvgIconVNode } = useSvgIcon();

const loginOrRegister = () => {
  toLogin();
};

const logout = () => {
  window.$messageBox
    ?.confirm($t('common.logoutConfirm'), $t('common.tip'), {
      confirmButtonText: $t('common.confirm'),
      cancelButtonText: $t('common.cancel'),
      type: 'warning'
    })
    .then(() => {
      authStore.resetStore();
    });
};
</script>

<template>
  <DarkModeContainer class="h-full flex-y-center justify-between px-12px shadow-header">
    <!-- 左侧Logo -->
  
    
    <!-- 中间导航 -->
    <div class="flex-y-center gap-24px">
      <router-link to="/client/home" class="hover:text-primary transition-all">首页</router-link>
      <router-link to="/client/function/test" class="hover:text-primary transition-all">测试页面</router-link>
      <a href="#" class="hover:text-primary transition-all">消息</a>
      <a href="#" class="hover:text-primary transition-all">帮助</a>
    </div>
    
    <!-- 右侧功能区 -->
    <div class="flex-y-center gap-16px">
      <div>
        <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
      </div>
      <ThemeSchemaSwitch
        :theme-schema="themeStore.themeScheme"
        :is-dark="themeStore.darkMode"
        @switch="themeStore.toggleThemeScheme"
      />
      
      <!-- 用户未登录显示登录按钮 -->
      <ElButton v-if="!authStore.isLogin" text @click="loginOrRegister">
        {{ $t('page.login.common.loginOrRegister') }}
      </ElButton>
      
      <!-- 用户已登录显示头像和下拉菜单 -->
      <ElDropdown v-else class="px-14px" trigger="click">
        <div class="flex items-center cursor-pointer">
          <ElAvatar 
            v-if="authStore.userInfo.userImages" 
            :src="authStore.userInfo.userImages" 
            :size="32" 
            class="mr-5px" 
          />
          <SvgIcon v-else icon="ph:user-circle" class="mr-5px text-icon-large" />
          <span class="text-16px font-medium">{{ authStore.userInfo.userName || '用户' }}</span>
        </div>

        <template #dropdown>
          <ElDropdownMenu>
            <ElDropdownItem>
              <router-link to="/" class="flex-y-center w-full">
                <span>后台管理</span>
              </router-link>
            </ElDropdownItem>
            <ElDropdownItem divided @click="logout">
              <div class="flex-y-center">
                <SvgIcon icon="ph:sign-out" class="mr-4px text-16px" />
                <span>退出登录</span>
              </div>
            </ElDropdownItem>
          </ElDropdownMenu>
        </template>
      </ElDropdown>
    </div>
  </DarkModeContainer>
</template>

<style scoped></style> 